<template>
	<view class="content">
		
		
		<ms-tabs :list="type" 
				v-model="active" 
				itemColor="#f56624" 
				lineColor="#f56624"   
				@input="inputv" 
				:sendData="inputval" 
				style="width: 100%;"
				/>
		<view class="content">
			<!-- 内容在这里写，切换不用管 -->
			<view class="list" v-for="(item,index) in objectArray" :key="item.id" @click="jump({item})">
				<view class="public listIcon">
					<image :src="item.icon"></image>
				</view>
				<view class="public listContent">
					<view class="number">编号：{{item.number}}</view>
					<view class="number">名称：{{item.name}}</view>
					<view v-if="item.type" class="type">运营中　在线</view>
					<view v-if="!item.type" class="type">暂停运营　不在线</view>
				</view>
				<view class="public rightKey">
					<image src="@/static/image/rightkey.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import msTabs from '@/components/ms-tabs/ms-tabs.vue'
	export default {
		components: {
			msTabs,
			
		},
		data() {
			return {
				active: 0,//选中的
				type: [{
						id:1,
						name: '在线'
					},{
						id:2,
						name: '离线'
					},{
						id:3,
						name: '异常'
					}
				],
				inputval:0,
				objectArray: [{
					id:1,
					number:'200300078　称重冰柜',
					name:'200300078',
					icon:'/static/image/snowflake.png',
					time:'2020-07-10  13:00:00',
					type:true
				},{
					id:2,
					number:'200300079　称重冰柜',
					name:'200300079',
					icon:'/static/image/snowflake.png',
					time:'2020-07-11  13:00:00',
					type:false
				}],
			}
		},
		onLoad() {

		},
		methods: {
			inputv(val){
					this.inputval=val;
			},
			jump(val){
				console.log(val);
				var val = JSON.stringify(val.item);
				uni.navigateTo({
				    url: '/pages/details/details?val=' + val
				});
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.content {
		width: 100%;
	}
	
	.list {
		width: 90%;
		height: 120rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 5%;
		padding-right: 5%;
		border-bottom: 2rpx solid #f9f9f9;
		display: flex;
		flex-wrap: wrap;
	}
	
	.public {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	
	.listIcon {
	  width: 11%;
	  height: 80rpx;
	  margin-top: 22rpx;
	}
	
	.listContent {
		width: 75%;
		height: 100%;
		margin-left: 30rpx;
	}
	
	.number {
		width: 100%;
		height: 33.3%;
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		line-height: 40rpx;
	}
	
	.type {
		width: 100%;
		height: 33.3%;
		font-size: 24rpx;
		color: #c1c0c6;
		line-height: 40rpx;
	}
	
	.rightKey {
		width: 8%;
		height: 100%;
	}
	
	.rightKey image {
		width: 35rpx;
		height: 40rpx;
	}
	
	.listIcon image {
		width: 100%;
		height: 100%;
	}
</style>
